<template>
	<view class="container">
		<view class="content">
			<view class="back" :style="{ top: getStatusBarHeight() + 'px' }">
				<navigator url="/pages/user/user" open-type="switchTab">
					<uni-icons type="left" size="30"></uni-icons>
				</navigator>
			</view>
			<view class="body">
				<view class="title">注册</view>
				<uni-forms ref="registerRef" :rules="rules" :label-width="70" :modelValue="formData">
					<uni-forms-item label="用户名" name="username">
						<uni-easyinput placeholder="请输入用户名" v-model="formData.username"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="昵称" name="nickName">
						<uni-easyinput placeholder="请输入昵称" v-model="formData.nickName"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="密码" name="password1">
						<uni-easyinput type="password" placeholder="请输入密码" v-model="formData.password1"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="确认密码" name="password2">
						<uni-easyinput type="password" placeholder="请再次输入密码" v-model="formData.password2"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="邮箱" name="email">
						<uni-easyinput placeholder="请输入邮箱" v-model="formData.email"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="验证码" name="captcha">
						<view class="captcha">
							<uni-easyinput placeholder="请输入验证码" v-model="formData.captcha"></uni-easyinput>
							<button :loading="isLoading" :disabled="isCounting" style="background-color: #ebf5ff" size="mini" type="primary" plain @click="sendCaptcha">
								{{ isCounting ? `重新发送(${count}s)` : '发送验证码' }}
							</button>
						</view>
					</uni-forms-item>
				</uni-forms>
				<view class="tips">
					<navigator url="/pages/login/login">已有账号？去登录</navigator>
				</view>
				<button style="background-color: #ebf5ff" type="primary" plain @click="onSubmit">注册</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { getStatusBarHeight, getNavBarHeight, getTitleBarHeight } from '../../utils/system.js';
import { register, sendRegisterCaptcha } from '../../api/user.js';

const formData = reactive({
	username: '',
	nickName: '',
	password1: '',
	password2: '',
	email: '',
	captcha: ''
});
const count = ref(30); // 倒计时秒数
const isCounting = ref(false); // 是否在倒计时中
const isLoading = ref(false);
const registerRef = ref(null);
const rules = ref({
	username: {
		rules: [
			{
				required: true,
				errorMessage: '请输入用户名'
			}
		]
	},
	nickName: {
		rules: [
			{
				required: true,
				errorMessage: '请输入昵称'
			}
		]
	},
	password1: {
		rules: [
			{
				required: true,
				errorMessage: '请输入密码'
			},
			{
				minLength: 6,
				errorMessage: '密码长度至少为6位'
			}
		]
	},
	password2: {
		rules: [
			{
				required: true,
				errorMessage: '请再次输入密码'
			},
			{
				minLength: 6,
				errorMessage: '密码长度至少为6位'
			}
		]
	},
	email: {
		rules: [
			{
				required: true,
				errorMessage: '请输入邮箱'
			},
			{
				format: 'email',
				errorMessage: '请输入正确的邮箱地址'
			}
		]
	},
	captcha: {
		rules: [
			{
				required: true,
				errorMessage: '请输入验证码'
			}
		]
	}
});

const sendCaptcha = async () => {
	if (!formData.email) {
		uni.showToast({
			title: '请输入验证码！',
			icon: 'none',
			position: 'top'
		});
		return;
	}
	isLoading.value = true;
	try {
		const res = await sendRegisterCaptcha({ address: formData.email });
		uni.showToast({
			title: res.data,
			icon: 'success',
			position: 'top'
		});

		// 开始倒计时
		if (!isCounting.value) {
			isCounting.value = true;
			count.value = 30;
			const timer = setInterval(() => {
				count.value--;
				if (count.value <= 0) {
					clearInterval(timer);
					isCounting.value = false;
				}
			}, 1000);
		}
	} catch (error) {
	} finally {
		isLoading.value = false; // 确保无论请求成功还是失败，都恢复按钮状态
	}
};

const onSubmit = () => {
	registerRef.value.validate().then(async (res) => {
		if (formData.password1 !== formData.password2) {
			uni.showToast({
				title: '密码不一致，请重新输入',
				icon: 'none',
				position: 'top'
			});
			(formData.password1 = ''), (formData.password2 = '');
			return;
		}
		const newRes = await register({
			username: formData.username,
			nickName: formData.nickName,
			password: formData.password1,
			email: formData.email,
			captcha: formData.captcha
		});
		uni.showToast({
			title: '注册成功！请前往登录！',
			icon: 'none',
			position: 'top'
		});
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}, 1000);
		registerRef.value.resetFields();
	});
};
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	.content {
		.back {
			width: 60rpx;
			height: 60rpx;
			position: relative;
			left: 20rpx;
			margin-bottom: 50rpx;
		}
		.body {
			padding: 80rpx;
			font-family: 'KaiTi', sans-serif;
			font-weight: 700;
			.title {
				font-size: 50rpx;
				margin-bottom: 30rpx;
			}
			.captcha {
				display: flex;
				justify-content: space-between;
				button {
					line-height: 2rem;
					margin-left: 20rpx;
				}
			}
			.tips {
				font-size: 30rpx;
				display: flex;
				justify-content: end;
				margin-bottom: 40rpx;
			}
		}
	}
}
</style>
